<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>css3超炫loading加载特效</title>

    <style type="text/css">
      /* load1 */
      .load1 {
        margin: 100px auto;
        width: 50px;
        height: 60px;
        text-align: center;
        font-size: 10px;
      }
      .load1 > div {
        background-color: #67cf22;
        height: 100%;
        width: 6px;
        display: inline-block;
        -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
        animation: stretchdelay 1.2s infinite ease-in-out;
      }
      .load1 .rect2 {
        -webkit-animation-delay: -1.1s;
        animation-delay: -1.1s;
      }
      .load1 .rect3 {
        -webkit-animation-delay: -1s;
        animation-delay: -1s;
      }
      .load1 .rect4 {
        -webkit-animation-delay: -0.9s;
        animation-delay: -0.9s;
      }
      .load1 .rect5 {
        -webkit-animation-delay: -0.8s;
        animation-delay: -0.8s;
      }
      @-webkit-keyframes stretchdelay {
        0%,
        40%,
        100% {
          -webkit-transform: scaleY(0.4);
        }
        20% {
          -webkit-transform: scaleY(1);
        }
      }
      @keyframes stretchdelay {
        0%,
        40%,
        100% {
          transform: scaleY(0.4);
          -webkit-transform: scaleY(0.4);
        }
        20% {
          transform: scaleY(1);
          -webkit-transform: scaleY(1);
        }
      }

      /* load2 */
      .load2 {
        width: 60px;
        height: 60px;
        background-color: #67cf22;
        margin: 100px auto;
        -webkit-animation: rotateplane 1.2s infinite ease-in-out;
        animation: rotateplane 1.2s infinite ease-in-out;
      }
      @-webkit-keyframes rotateplane {
        0% {
          -webkit-transform: perspective(120px);
        }
        50% {
          -webkit-transform: perspective(120px) rotateY(180deg);
        }
        100% {
          -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg);
        }
      }
      @keyframes rotateplane {
        0% {
          transform: perspective(120px) rotateX(0deg) rotateY(0deg);
          -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        }
        50% {
          transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
          -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
        }
        100% {
          transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
          -webkit-transform: perspective(120px) rotateX(-180deg)
            rotateY(-179.9deg);
        }
      }

      /* load3 */
      .load3 {
        width: 60px;
        height: 60px;
        position: relative;
        margin: 100px auto;
      }
      .double-bounce1,
      .double-bounce2 {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #67cf22;
        opacity: 0.6;
        position: absolute;
        top: 0;
        left: 0;

        -webkit-animation: bounce 2s infinite ease-in-out;
        animation: bounce 2s infinite ease-in-out;
      }
      .double-bounce2 {
        -webkit-animation-delay: -1s;
        animation-delay: -1s;
      }
      @-webkit-keyframes bounce {
        0%,
        100% {
          -webkit-transform: scale(0);
        }
        50% {
          -webkit-transform: scale(1);
        }
      }
      @keyframes bounce {
        0%,
        100% {
          transform: scale(0);
          -webkit-transform: scale(0);
        }
        50% {
          transform: scale(1);
          -webkit-transform: scale(1);
        }
      }

      /* load4 */
      .load4 {
        margin: 100px auto;
        width: 32px;
        height: 32px;
        position: relative;
      }
      .cube1,
      .cube2 {
        background-color: #67cf22;
        width: 30px;
        height: 30px;
        position: absolute;
        top: 0;
        left: 0;
        -webkit-animation: cubemove 1.8s infinite ease-in-out;
        animation: cubemove 1.8s infinite ease-in-out;
      }
      .cube2 {
        -webkit-animation-delay: -0.9s;
        animation-delay: -0.9s;
      }
      @-webkit-keyframes cubemove {
        25% {
          -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
        }
        50% {
          -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
        }
        75% {
          -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg)
            scale(0.5);
        }
        100% {
          -webkit-transform: rotate(-360deg);
        }
      }
      @keyframes cubemove {
        25% {
          transform: translateX(42px) rotate(-90deg) scale(0.5);
          -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
        }
        50% {
          transform: translateX(42px) translateY(42px) rotate(-179deg);
          -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
        }
        50.1% {
          transform: translateX(42px) translateY(42px) rotate(-180deg);
          -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
        }
        75% {
          transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
          -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg)
            scale(0.5);
        }
        100% {
          transform: rotate(-360deg);
          -webkit-transform: rotate(-360deg);
        }
      }

      /* load5 */
      .load5 {
        margin: 100px auto;
        width: 90px;
        height: 90px;
        position: relative;
        text-align: center;
        -webkit-animation: rotate 2s infinite linear;
        animation: rotate 2s infinite linear;
      }
      .dot1,
      .dot2 {
        width: 60%;
        height: 60%;
        display: inline-block;
        position: absolute;
        top: 0;
        background-color: #67cf22;
        border-radius: 100%;
        -webkit-animation: bounce 2s infinite ease-in-out;
        animation: bounce 2s infinite ease-in-out;
      }
      .dot2 {
        top: auto;
        bottom: 0px;
        -webkit-animation-delay: -1s;
        animation-delay: -1s;
      }
      @-webkit-keyframes rotate {
        100% {
          -webkit-transform: rotate(360deg);
        }
      }
      @keyframes rotate {
        100% {
          transform: rotate(360deg);
          -webkit-transform: rotate(360deg);
        }
      }
      @-webkit-keyframes bounce {
        0%,
        100% {
          -webkit-transform: scale(0);
        }
        50% {
          -webkit-transform: scale(1);
        }
      }
      @keyframes bounce {
        0%,
        100% {
          transform: scale(0);
          -webkit-transform: scale(0);
        }
        50% {
          transform: scale(1);
          -webkit-transform: scale(1);
        }
      }

      /* load6 */
      .load6 {
        margin: 100px auto 0;
        width: 150px;
        text-align: center;
      }
      .load6 > div {
        width: 30px;
        height: 30px;
        background-color: #67cf22;
        border-radius: 100%;
        display: inline-block;
        -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
        animation: bouncedelay 1.4s infinite ease-in-out;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
      }
      .load6 .bounce1 {
        -webkit-animation-delay: -0.32s;
        animation-delay: -0.32s;
      }
      .load6 .bounce2 {
        -webkit-animation-delay: -0.16s;
        animation-delay: -0.16s;
      }
      @-webkit-keyframes bouncedelay {
        0%,
        80%,
        100% {
          -webkit-transform: scale(0);
        }
        40% {
          -webkit-transform: scale(1);
        }
      }
      @keyframes bouncedelay {
        0%,
        80%,
        100% {
          transform: scale(0);
          -webkit-transform: scale(0);
        }
        40% {
          transform: scale(1);
          -webkit-transform: scale(1);
        }
      }

      /* load7 */
      .load7 {
        width: 40px;
        height: 40px;
        margin: 100px auto;
        background-color: #333;
        border-radius: 100%;
        -webkit-animation: scaleout 1s infinite ease-in-out;
        animation: scaleout 1s infinite ease-in-out;
      }
      @-webkit-keyframes scaleout {
        0% {
          -webkit-transform: scale(0);
        }
        100% {
          -webkit-transform: scale(1);
          opacity: 0;
        }
      }
      @keyframes scaleout {
        0% {
          transform: scale(0);
          -webkit-transform: scale(0);
        }
        100% {
          transform: scale(1);
          -webkit-transform: scale(1);
          opacity: 0;
        }
      }

      /* load8 */
      .load8 {
        margin: 100px auto;
        width: 20px;
        height: 20px;
        position: relative;
      }
      .container1 > div,
      .container2 > div,
      .container3 > div {
        width: 6px;
        height: 6px;
        background-color: #333;
        border-radius: 100%;
        position: absolute;
        -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
        animation: bouncedelay 1.2s infinite ease-in-out;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
      }
      .load8 .load8-container {
        position: absolute;
        width: 100%;
        height: 100%;
      }
      .container2 {
        -webkit-transform: rotateZ(45deg);
        transform: rotateZ(45deg);
      }
      .container3 {
        -webkit-transform: rotateZ(90deg);
        transform: rotateZ(90deg);
      }
      .circle1 {
        top: 0;
        left: 0;
      }
      .circle2 {
        top: 0;
        right: 0;
      }
      .circle3 {
        right: 0;
        bottom: 0;
      }
      .circle4 {
        left: 0;
        bottom: 0;
      }
      .container2 .circle1 {
        -webkit-animation-delay: -1.1s;
        animation-delay: -1.1s;
      }
      .container3 .circle1 {
        -webkit-animation-delay: -1s;
        animation-delay: -1s;
      }
      .container1 .circle2 {
        -webkit-animation-delay: -0.9s;
        animation-delay: -0.9s;
      }
      .container2 .circle2 {
        -webkit-animation-delay: -0.8s;
        animation-delay: -0.8s;
      }
      .container3 .circle2 {
        -webkit-animation-delay: -0.7s;
        animation-delay: -0.7s;
      }
      .container1 .circle3 {
        -webkit-animation-delay: -0.6s;
        animation-delay: -0.6s;
      }
      .container2 .circle3 {
        -webkit-animation-delay: -0.5s;
        animation-delay: -0.5s;
      }
      .container3 .circle3 {
        -webkit-animation-delay: -0.4s;
        animation-delay: -0.4s;
      }
      .container1 .circle4 {
        -webkit-animation-delay: -0.3s;
        animation-delay: -0.3s;
      }
      .container2 .circle4 {
        -webkit-animation-delay: -0.2s;
        animation-delay: -0.2s;
      }
      .container3 .circle4 {
        -webkit-animation-delay: -0.1s;
        animation-delay: -0.1s;
      }
      @-webkit-keyframes bouncedelay {
        0%,
        80%,
        100% {
          -webkit-transform: scale(0);
        }
        40% {
          -webkit-transform: scale(1);
        }
      }
      @keyframes bouncedelay {
        0%,
        80%,
        100% {
          transform: scale(0);
          -webkit-transform: scale(0);
        }
        40% {
          transform: scale(1);
          -webkit-transform: scale(1);
        }
      }
    </style>
  </head>
  <body>
    <div class="load1">
      <div class="rect1"></div>
      <div class="rect2"></div>
      <div class="rect3"></div>
      <div class="rect4"></div>
      <div class="rect5"></div>
    </div>

    <div class="load2"></div>

    <div class="load3">
      <div class="double-bounce1"></div>
      <div class="double-bounce2"></div>
    </div>

    <div class="load4">
      <div class="cube1"></div>
      <div class="cube2"></div>
    </div>

    <div class="load5">
      <div class="dot1"></div>
      <div class="dot2"></div>
    </div>

    <div class="load6">
      <div class="bounce1"></div>
      <div class="bounce2"></div>
      <div class="bounce3"></div>
    </div>

    <div class="load7"></div>

    <div class="load8">
      <div class="load8-container container1">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
      </div>

      <div class="load8-container container2">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
      </div>

      <div class="load8-container container3">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
      </div>
    </div>
  </body>
</html>
